<template>
  <el-container>
    <aside-layout></aside-layout>
    <el-main>
      <div class="page-container">
        <h1><i class="el-icon-goods"></i> 促销管理</h1>
        <el-form :inline="true" :model="filterData" class="filter-form">
          <el-form-item label="日期范围">
            <el-date-picker
              v-model="filterData.dateRange"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              format="yyyy-MM-dd"
            />
          </el-form-item>
          <el-form-item label="状态">
            <el-select v-model="filterData.status" placeholder="请选择状态">
              <el-option label="全部" value=""></el-option>
              <el-option label="进行中" value="active"></el-option>
              <el-option label="已结束" value="ended"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="filterPromotions">筛选</el-button>
          </el-form-item>
        </el-form>
        <el-table :data="filteredPromotions" style="width: 100%">
          <el-table-column prop="name" label="活动名称" width="200" />
          <el-table-column prop="startDate" label="开始日期" width="150" />
          <el-table-column prop="endDate" label="结束日期" width="150" />
          <el-table-column prop="status" label="状态" width="120" />
          <el-table-column label="操作" width="180">
            <template slot-scope="scope">
              <el-button size="small" type="success" @click="editPromotion">编辑</el-button>
              <el-button size="small" type="danger" @click="deletePromotion(scope.$index)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </el-main>
  </el-container>
</template>

<script>
import AsideLayout from '@/layout/asideLayout.vue';

export default {
  name: 'PromotionManagement',
  components: {
    AsideLayout
  },
  data() {
    return {
      filterData: {
        dateRange: [],
        status: ''
      },
      promotions: [
        { name: '双十一大促', startDate: '2023-11-01', endDate: '2023-11-11', status: '进行中' },
        { name: '年终大促', startDate: '2023-12-20', endDate: '2023-12-31', status: '已结束' },
        // 更多促销活动可以在这里添加
      ],
      filteredPromotions: []
    };
  },
  mounted() {
    this.filteredPromotions = this.promotions;
  },
  methods: {
    filterPromotions() {
      this.filteredPromotions = this.promotions.filter(promotion => {
        const [start, end] = this.filterData.dateRange;
        const promotionStartDate = new Date(promotion.startDate);
        const promotionEndDate = new Date(promotion.endDate);
        const isWithinDateRange = (!start || promotionStartDate >= new Date(start)) && (!end || promotionEndDate <= new Date(end));
        const isStatusMatch = !this.filterData.status || promotion.status === this.filterData.status;
        return isWithinDateRange && isStatusMatch;
      });
    },
    editPromotion() {
      this.$message.success('编辑功能待实现');
    },
    deletePromotion(index) {
      this.filteredPromotions.splice(index, 1);
      this.$message.error('促销活动已删除');
    }
  }
};
</script>

<style scoped>
.page-container {
  padding: 20px;
}

.filter-form {
  margin-bottom: 20px;
}
</style> 